﻿.overflow-visible {
    overflow: visible !important;
}

.overflow-scroll {
    overflow: scroll !important;
}

@each $value1 in $overflows {
    @each $value2 in $overflows {
        .overflow-#{$value1}-#{$value2} {
            overflow: $value1 $value2 !important;
        }
    }
}

ol.ordered-list {
    &-lower-alpha {
        list-style-type: lower-alpha;
    }

    &-lower-roman {
        list-style-type: lower-roman;
    }

    &-upper-alpha {
        list-style-type: upper-alpha;
    }

    &-upper-roman {
        list-style-type: upper-roman;
    }
}

// Position

@each $name, $value in $position-values {
    .top-#{$name} {
        top: #{$value} !important;
    }

    .bottom-#{$name} {
        bottom: #{$value} !important;
    }

    .left-#{$name} {
        left: #{$value} !important;
    }

    .right-#{$name} {
        right: #{$value} !important;
    }
}

.translate-middle {
    transform: translate(-50%, -50%) !important;
}

.translate-middle-x {
    transform: translateX(-50%) !important;
}

.translate-middle-y {
    transform: translateY(-50%) !important;
}

$border-sides: ("top", "right", "bottom", "left");
$border-sizes: (1, 2, 3, 4, 5);

@each $size in $border-sizes {
    .border-#{$size} {
        border: #{$size}px solid $border-color !important;
    }

    @each $color-name, $color-value in $theme-colors {
        .border-#{$color-name}-#{$size} {
            border: #{$size}px solid $color-value !important;
        }
    }

    @each $side in $border-sides {
        .border-#{$side}-#{$size} {
            border-#{$side}: #{$size}px solid $border-color !important;
        }

        @each $color-name, $color-value in $theme-colors {
            .border-#{$color-name}-#{$side}-#{$size} {
                border-#{$side}: #{$size}px solid $color-value !important;
            }
        }
    }
}
